<template>
  <el-popover
    placement="right-start"
    title=""
    width="200"
    trigger="hover"
  >
    <span slot="reference">{{ value }}</span>
    <template #default>
      <div class="content">
        {{ value }} <span
          class="copy-text"
          @click="handleCopy(value,$event)"
        >复制</span>
      </div>
      <!--            <div class="id-tip" v-show="row[idField]">{{row[idField]}} <i class="iconfont icon-fuzhi copy" @click="handleCopy(row[idField],$event)"></i></div>-->
    </template>
  </el-popover>
</template>

<script>
import Vue from 'vue';
import {Popover} from "element-ui";
import clip from '@/utils/clipboard';

Vue.use(Popover);
/**
 * id提示框
 * @author maolin
 */
export default {
  name: "ErpViewIdTip",
  components: {},
  props: {
    /**
     * 默认值
     * @public
     */
    value: {
      type: [Number, String],
      default: ''
    },
    /**
     * 额外配置
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 行数据
     * @public
     */
    row: {
      type: Object,
      default () {
        return {};
      }
    },

  },
  data() {
    return {};
  },
  computed: {
    idField () {
      if (this.extra && this.extra.idField) {
        return this.extra.idField;
      }
      return 'id';
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 复制值
     * @private
     */
    handleCopy (value, event) {
      clip(value, event);
    }
  },
};
</script>

<style lang="scss" scoped>
    $primaryColor: var(--primary-color);
    .content{
        font-weight: bold;
        margin-bottom: 8px;
        .copy-text{
            color: $primaryColor;
            font-weight: normal;
        }
        .copy{
            cursor: pointer;
        }
    }
    .id-tip{
        color: #999;
        .copy{
            cursor: pointer;
        }

    }

</style>
